﻿<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>session</title>

<style type="text/css">

    @media screen and (max-width:600px){
      .dandelion{display: none !important;}
    }

    .dandelion .smalldan {
        width: 36px;
        height: 60px;
        left: 21px;
        background-position: 0 -90px;
        border: 0px solid red;
    }

    .dandelion span {
        -webkit-animation: ball-x 3s linear 2s infinite;
        -moz-animation: ball-x 3s linear 2s infinite;
        animation: ball-x 3s linear 2s infinite;
        -webkit-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        transform-origin: bottom center;
    }

    .dandelion span {
        display:block;
        position:fixed;
        z-index:999999;
        bottom: 0px;
        /* background-image:url(https://www.seoblogs.cn/images/pgy.png); */
        background-image:url(./pgy.png);
        background-repeat: no-repeat;
        _background: none;
    }

    .dandelion .bigdan {
        width: 64px;
        height: 115px;
        left: 47px;
        background-position: -86px -36px;
        border: 0px solid red;
    }

    @keyframes ball-x {
        0%  { transform:rotate(0deg); }
        20% { transform:rotate(5deg); }
        40% { transform:rotate(0deg); }
        60% { transform:rotate(-5deg);}
        80% { transform:rotate(0deg); }
        100%{ transform:rotate(0deg); }
    }

    @-webkit-keyframes ball-x {
        0%  { -webkit-transform:rotate(0deg); }
        20% { -webkit-transform:rotate(5deg); }
        40% { -webkit-transform:rotate(0deg); }
        60% { -webkit-transform:rotate(-5deg);}
        80% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(0deg);}
    }

    @-moz-keyframes ball-x {
        0%  { -moz-transform:rotate(0deg); }
        20% { -moz-transform:rotate(5deg); }
        40% { -moz-transform:rotate(0deg); }
        60% { -moz-transform:rotate(-5deg);}
        80% { -moz-transform:rotate(0deg); }
        100%{ -moz-transform:rotate(0deg); }
    }


</style>

  </head>
  <body>



<!--蒲公英-->
    <div class="dandelion">
        <span class="smalldan"></span>
        <span class="bigdan"></span>
    </div>
  </body>
</html>
